<template>
	<cl-crud @load="onLoad">
		<template #table-column-pic="{ scope }">
			<img class="code" :src="scope.row.pic" />
		</template>
		<template #table-column-isDisplay="{ scope }">
			<el-switch
				v-model="scope.row.isDisplay"
				:active-value="1"
				:inactive-value="0"
				@change="e => onSwitchChange(e, scope.row)"
			></el-switch>
		</template>
	</cl-crud>
</template>

<script>
export default {
	name: 'wechat',
	data() {
		return {
			crud: null,
			selectRow: []
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.setting.wechat)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '客服微信号',
							prop: 'wx',
							align: 'center'
						},
						{
							label: '微信二维码',
							prop: 'pic',
							align: 'center',
							emptyText: '暂无'
						},
						{
							label: '排序',
							prop: 'level',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'isDisplay',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						}
					]
				})
				.set('upsert', {
					props: {
						title: '',
						width: '750px',
						labelWidth: '130px'
					},
					items: [
						{
							prop: 'wx',
							label: '微信客服号：',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请填写微信客服号',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '微信客服号不能为空'
								}
							]
						},
						{
							label: '微信二维码：',
							prop: 'pic',
							component: {
								name: 'cl-upload',
								props: {
									height: '70px',
									width: '70px',
									isLimit: true,
									size: ''
								}
							},
							rules: {
								required: true,
								message: '微信二维码不能为空'
							}
						},
						{
							prop: 'level',
							label: '排序：',
							value: 0,
							component: {
								name: 'el-input-number',
								attrs: {
									placeholder: '请输入排序',
									clearable: true
								}
							},
							rules: [
								{
									required: true,
									message: '排序不能为空'
								}
							]
						},
						{
							label: '状态：',
							prop: 'isDisplay',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '显示',
										value: 1
									},
									{
										label: '隐藏',
										value: 0
									}
								]
							},
							rules: {
								required: true,
								message: '状态不能为空'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		onSwitchChange(e, item) {
			this.$service.setting.wechat
				.update({
					id: item.id,
					isDisplay: e
				})
				.then(() => {
					this.crud.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="stylus" scoped>
.code {
    width 150px
    height 150px;
}
</style>
